<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>EDIFIER</title>
		<link rel="stylesheet" type="text/css" href="css/ProductBuy.css"/>
		<link rel="stylesheet" type="text/css" href="css/footer.css"/>
		<script src="js/productsearch.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"id="viewport"/>
	</head>
	<body>
		<!-- 页面头部 -->
		<header>
			<div class="region">
				<div class="bighead_box">
					<!-- 导航栏 -->
					<div class="nav_box">
						<!-- 产品图标 -->
						<div class="baseBox logoNmenu">
							<a href="index.html"><img class="logo" src="img/首页图片/BrandLogo.png" alt="LOGO"></a>
							<!-- 导航菜单 -->
							<div class="menu">
								<ul>
									<li class="productMenu">
										<a href="javascript:;">产品
										<img class="down" src="img/首页图片/downArr.png" >
										<img class="up" src="img/首页图片/uparr.png" >
										</a>
									</li>
									<li>
										<a href="service.html">服务与售后</a>
									</li>
									<li>
										<a href="ProductBuy.html">产品购买</a>
									</li>
								</ul>
							</div>
							<!-- 搜索图标 -->
							<div class="searchBox">
								<div class="search">
									<svg t="1615281300872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2446" width="64" height="64">
									    <path d="M946.8 883.1L786.2 722.5c55.5-69.4 88.9-157.2 88.9-252.9C875 245.6 693.5 64 469.5 64S64 245.6 64 469.5 245.6 875 469.5 875c95.7 0 183.6-33.4 252.9-88.9L883 946.7c17.6 17.6 46.1 17.6 63.7 0 17.7-17.5 17.7-46 0.1-63.6z m-477.3-98.2c-174.2 0-315.4-141.2-315.4-315.4s141.2-315.4 315.4-315.4 315.4 141.2 315.4 315.4-141.2 315.4-315.4 315.4z"
										fill="#0E0E0E" p-id="2447"></path>
									</svg>
								</div>
								<!-- 国际站啥的 -->
								<div>
									<a href="#">
										<img src="img/首页图片/global.png" >
										国际站
									</a>
								</div>
							</div>
						</div>
						<!-- 二级菜单 -->
						<div class="showMenu">
							<div class="baseBox alertMenu">
								<dl>
									<dt><a href="#">耳机</a></dt>
									<dd><a href="#">漫步者</a></dd>
									<dd><a href="#">声迈</a></dd>
									<dd><a href="#">VOLONA</a></dd>
									<dd><a href="#">HECATE</a></dd>
									<dd><a href="#">STAX</a></dd>
								</dl>
								<dl>
									<dt><a href="#">音响</a></dt>
									<dd><a href="#">漫步者</a></dd>
									<dd><a href="#">HECATE</a></dd>
									<dd><a href="#">Airpulse</a></dd>
									<dd><a href="#">VOLONA</a></dd>
								</dl>
								<dl>
									<dt><a href="#">教育产品</a></dt>
									<dd><a href="#">考试耳机</a></dd>
									<dd><a href="#">模拟耳机</a></dd>
								</dl>
								<dl>
									<dt><a href="#">汽车音响</a></dt>
									<dd><a href="#">无损系列</a></dd>
									<dd><a href="#">快装系列</a></dd>
									<dd><a href="#">改装系列</a></dd>
									<dd><a href="#">隔音系列</a></dd>
									<dd><a href="#">线材系列</a></dd>
								</dl>
								<dl>
									<dt><a href="#">麦克风</a></dt>
									<dd><a href="#">麦克风</a></dd>
								</dl>
								<!-- 关闭耳机菜单 -->
								<div class="close">
									<img src="img/首页图片/close.png" >
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 搜索弹出框 -->
				<div class="searchMask">
					<div class="searchContentInput">
						<div class="closeSerchMask">X</div>
						<input type="text" placeholder="请输入搜索的产品" id="MenukeywordInput"/>
						<div class="searchInputIcon">
							<svg t="1615281300872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2446" width="64" height="64">
							    <path d="M946.8 883.1L786.2 722.5c55.5-69.4 88.9-157.2 88.9-252.9C875 245.6 693.5 64 469.5 64S64 245.6 64 469.5 245.6 875 469.5 875c95.7 0 183.6-33.4 252.9-88.9L883 946.7c17.6 17.6 46.1 17.6 63.7 0 17.7-17.5 17.7-46 0.1-63.6z m-477.3-98.2c-174.2 0-315.4-141.2-315.4-315.4s141.2-315.4 315.4-315.4 315.4 141.2 315.4 315.4-141.2 315.4-315.4 315.4z"
								fill="#0E0E0E" p-id="2447"></path>
							</svg>
						</div>
						<!-- 查询返回的内容部分 -->
						<div class="searchKeywordList">
							<!-- 没有结果弹出上面这个 -->
							<div class="nodata" id="noresdiv" style="display: none;">没有找到结果</div>
							<!-- 有结果弹出下面这个 -->
							<div id="hasresdiv" style="display: none;">
								<div class="title">
						        搜索结果( <span id="hasrevnum"></span> )
								</div>
								<ol id="searchul">
						                        
								</ol>
							</div>
						</div>
					</div>
					<!-- 推荐产品 -->
					<div class="baseBox searchContentList">
					            <div class="tjSearchProduct">推荐产品</div>
					            <ul>
					                <li>
										<a href="product/product-28.html">
										<div class="imgcontent"><img src="img/首页图片/Hotproducts1.jpg" alt="" />
										</div><p>LolliPods 真无线蓝牙耳机</p>
										</a>
									</li>
									<li>
										<a href="product/product-14.html">
										<div class="imgcontent"><img src="img/首页图片/Hotproducts2.jpg" alt="" />
										</div><p>LolliPods Plus  真无线立体声耳机</p>
										</a>
									</li>
									<li>
										<a href="product/product-36.html">
										<div class="imgcontent"><img src="img/首页图片/Hotproducts5.jpg" alt="" />
										</div><p>TWS NB2 真无线主动降噪耳机</p>
										</a>
									</li>
					            </ul>
					            <div class="tjSearchProduct">
					                热门搜索
					            </div>
					            <dl id="hotsearchdl">
					                <dd><a href="">G4</a></dd>
					                <dd><a href="">G2</a></dd>
					                <dd><a href="">驱动</a></dd>
									<dd><a href="">耳机</a></dd>
									<dd><a href="">GS02</a></dd>
					            </dl>
					        </div>
				</div>
			</div>
		</header>
		<!-- 页面头部结束 -->
		<!-- 页面身体部分开始 -->
		<section>
			<div class="secton_bigbox">
				<div class="newsBanner aboutBan saftyBan" style="background: url(img/产品购买页图片/headphone.jpg) center center no-repeat;">
				</div>
			<!-- 背景 -->
			<div class="serviceTab  baseBox insulationTab changeTab">
				<div class="serviceTab serviceTabs baseBox">
					<a href="javascript:;" class="tabItem on" id="servicecall" onclick="erjishow()">
						<div>
							<img src="img/产品购买页图片/耳机.png"  style="height: 60px; width: 60px;">
						</div>
						耳机
					</a>
				</div>
			</div>
			<!-- 产品介绍 -->
			<div class="productList baseBox">
				<div class="productSelect">
					<!-- 耳机 -->
					<dl class="erji">
						<dt>功能用途</dt>
						<dd attrid="41" class="41">真无线</dd>
						<dd attrid="42" class="42">主动降噪</dd>
						<dd attrid="43" class="43">运动</dd>
						<dd attrid="44" class="44">游戏</dd>
					</dl>
					<dl class="erji">
						<dt>佩戴方式</dt>
						<dd attrid="46">头戴式</dd>
						<dd attrid="47">入耳式</dd>
						<dd attrid="48">颈挂式</dd>
						<dd attrid="49">骨传导</dd>
					</dl>
				</div>
				<div class="productMain">
					<ul id="productlistul">
						<li>
							<a href="product1.html">
								<img src="img/产品购买页图片/N2%20Pods1.png" class="productImg">
								<p>N2 Pods</p>
								<div class="bref">真无线立体声耳机</div>
								<div class="price">
									<span>￥</span>
									188
								</div>
							</a>
						</li>
						<li>
							<a href="">
								<img src="img/产品购买页图片/声声漫%20T-Pods1.png" class="productImg">
								<p>声声漫 T-Pods</p>
								<div class="bref">真无线立体声耳机</div>
								<div class="price">
									<span>￥</span>
									358
								</div>
							</a>
						</li>
						<li><a href="">
						<img src="img/产品购买页图片/DreamPods%202-white.png" class="productImg">
						<p>DreamPods 2</p>
						<div class="bref">Al骨传导通话降噪耳机</div>
						<div class="price">
							<span>￥</span>
							1680
						</div></a></li>
						<li><a href="">
						<img src="img/产品购买页图片/S3right.png" class="productImg">
						<p>S3</p>
						<div class="bref">头戴式平板振膜耳机</div>
						<div class="price">
							<span>￥</span>
							1680
						</div></a></li>
						<li><a href="">
						<img src="img/产品购买页图片/LolliPods%20Mini-black.png" class="productImg">
						<p>LolliPods Mini</p>
						<div class="bref">真无线立体声耳机</div>
						<div class="price">
							<span>￥</span>
							249
						</div></a></li>
						<li><a href="">
						<img src="img/产品购买页图片/W280NB-red.png" class="productImg">
						<p>W280NB</p>
						<div class="bref">主动降噪蓝牙运动耳机</div>
						<div class="price">
							<span>￥</span>
							298
						</div></a></li>
						<li><a href="">
						<img src="img/产品购买页图片/TWS%20NB2%20Pro.png" class="productImg">
						<p>TWS NB3</p>
						<div class="bref">真无线主动降噪耳机</div>
						<div class="price">
							<span>￥</span>
							598
						</div></a></li>
						<li><a href="">
						<img src="img/产品购买页图片/W820NB-black.png" class="productImg">
						<p>W820NB</p>
						<div class="bref">头戴式蓝牙主动降噪耳机</div>
						<div class="price">
							<span>￥</span>
							399
						</div></a></li>
						<li><a href="">
						<img src="img/产品购买页图片/NeoBus%20Pro1.png" class="productImg">
						<p>NeoBuds Pro</p>
						<div class="bref">真无线圈铁降噪耳机</div>
						<div class="price">
							<span>￥</span>
							898
						</div></a></li>
						<li><a href="">
						<img src="img/产品购买页图片/W300BT%20Plus.png" class="productImg">
						<p>W300BT Plus</p>
						<div class="bref">真无线立体声耳机</div>
						<div class="price">
							<span>￥</span>
							259
						</div></a></li>
						<li><a href="">
						<img src="img/产品购买页图片/LolliPods%20Mini-black.png" class="productImg">
						<p>LolliPods Pro</p>
						<div class="bref">真无线主动降噪耳机</div>
						<div class="price">
							<span>￥</span>
							399
						</div></a></li>
						<li><a href="">
						<img src="img/产品购买页图片/W200BT%20Plus.png" class="productImg">
						<p>W200BT Plus</p>
						<div class="bref">无线运动蓝牙线控耳机</div>
						<div class="price">
							<span>￥</span>
							159
						</div></a></li>
					</ul>
					<div class="loadMore">
						加载查看更多
					</div>
				</div>
			</div>
			</div>
		</section>
		<!-- 页面底部开始 -->
		<footer>
			<div class="footer_bigbox">
				<div class="subNav baseBox">
					<dl>
						<dt>企业相关</dt>
						<dd><a href="#">关于我们</a></dd>
						<dd><a href="#">社会责任</a></dd>
						<dd><a href="#">投资者关系</a></dd>
						<dd><a href="#">联系我们</a></dd>
						<dd><a href="#">人才招聘</a></dd>
						<dd><a href="#">热点新闻</a></dd>
					</dl>
					<dl>
						<dt>相关服务</dt>
						<dd><a href="#">服务协议</a></dd>
						<dd><a href="#">隐私政策</a></dd>
						<dd><a href="#">安规认证</a></dd>
					</dl>
					<dl>
						<dt>相关链接</dt>
						<dd><a href="#">AirPulse</a></dd>
						<dd><a href="#">STAX</a></dd>
					</dl>
					<dl style="border-right: none;">
						<dt>商品购买</dt>
						<dd><a href="#">京东</a></dd>
						<dd><a href="#">天猫</a></dd>
					</dl>
				</div>
				<!-- 页面底部部分的国际站 -->
				<!-- 这个 -->
				<div class="copyright baseBox pc" style="flex-direction: column;align-items: center; justify-content: center;padding: 10px 0;">
					<p>
						<a href="#" target="_blank">粤ICP备08026172号</a>
						&nbsp;Copyright 2019 深圳市漫步者科技股份有限公司  版权所有 
					</p>
					<p>北京爱德发科技有限公司对本网站所有图片与资料拥有所有权,如未经允许盗链或下载使用,必追究相关法律责任</p>
				</div>
				<a href="#" target="_blank">
					<img src="img/首页图片/govIcon.gif" title="深圳市市场监督管理局企业主体身份公示" alt="深圳市市场监督管理局企业主体身份公示" style="border-width:0px;border:hidden; border:none; width: 36px; height: 50px;">
				</a>
			</div>
		</footer>
	</body>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/edifier.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/产品购买页.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	//耳机筛选
	function erji(){
		var nowtype = "pc";
		    function updateProdduct(append, start) {
		        var cid = "11";
		        var tagids = [];
		        var pagelimit = 12;
		
		        if (!start) start = 0;
		
		        if (nowtype == "pc")
		        {
		            $('.productSelect dd').each(function() {
		                if ($(this).hasClass("onselect")) {
		                    tagids.push(parseInt($(this).attr("attrid")));
		                }
		            })
		        }
		        else
		        {
		            $('.leftWapMenu li').each(function() {
		                if ($(this).hasClass("onselect")) {
		                    tagids.push(parseInt($(this).attr("attrid")));
		                }
		            })            
		        }
		        console.log(cid);
		        console.log(tagids);
		        var allnumber = getproductnumberbycidandtagids( cid, tagids);
		        var list = getproductlistbycidandtagids( cid, tagids, start, pagelimit);
		        console.log(allnumber);
		        console.log(list);
		
		        var html = "";
		        for (var i = 0; i < list.length; i++) {
		            var pic1 = "";
		            var pic2 = "";
		            if (list[i].imgs.length > 1) {
		                pic1 = list[i].imgs[0].imgs[0];
		                pic2 = list[i].imgs[1].imgs[0];
		            } else {
		                if (list[i].imgs[0].imgs.length > 1) {
		                    pic1 = list[i].imgs[0].imgs[0];
		                    pic2 = list[i].imgs[0].imgs[1];
		                } else {
		                    pic1 = list[i].imgs[0].imgs[0];
		                    pic2 = list[i].imgs[0].imgs[0];
		                }
		            }
		
		            html += '<li><a href="product1.html">\
		                        <img class="productImg" src="' + pic1 + '" alt="产品">\
		                        <img class="productHover" src="' + pic2 + '" alt="产品">\
		                        <p>' + list[i].name + '</p>\
		                        <div class="bref">' + list[i].desctxt + '</div>';
		            if ( list[i].nowprice )
		            {
		                html += '<div class="price"><span>￥</span>'+list[i].nowprice+'</div>';
		            }
		            html += '</a></li>';
		
		        }
		        if (append == 1) {
		            $("#productlistul").append(html);
		        } else {
		            $("#productlistul").html(html);
		        }
		
		        if ((pagelimit+start) >= allnumber)
		        {
		            $(".loadMore").hide();
		        }
		        else
		        {
		            $(".loadMore").show();
		        }
		
		    }
		
		    $('.loadMore').click(function() {
		        var num = 0;
		        $('#productlistul li').each(function() {
		            num++
		        })
		        //nowtype = "pc";
		        updateProdduct(1, num);
		    })
		    $('.wapProductMenus div ul li').click(function() {
		        $(this).toggleClass('onselect')
		        nowtype = "wap";
		        updateProdduct()
		    })
		
		    $('.wapProductMenus div').click(function() {
		        var list = $(this).find('li')
		        let litype = false
		        for (let i = 0; i < list.length; i++) {
		            if(list.eq(i).hasClass('onselect')){
		                litype = true 
		                break
		            }
		        }
		        if(litype){
		            $(this).addClass('activeOn')
		        }else{
		            $(this).removeClass('activeOn')
		        }
		        $(this).toggleClass('active').siblings().removeClass('active')
		    })
		        $('.productSelect dd').click(function() {
		            $(this).toggleClass('onselect')
		            nowtype = "pc";
		            updateProdduct()
		        })
	}
	erji();
	
	var menulist = [];
	          function searchMenukeyword(word){
	              $.get("./api/?s=/api/api/submitSearch",{word:word},function(data){},"json");
	              if (!word)
	              {
	                  return false;
	              }
	              $(".searchKeywordList").hide();
	              $(".searchContentList").hide();
	              console.log(word);
	              menulist = getproductlistbyOnlyNamekeyword(word);
	              if (menulist.length > 0)
	              {
	                  $(".hasContentMenu").show();
	                  if(document.body.clientWidth<=1024){
	                      $(".searchProductTab").show();
	                  }
	                  $(".menublankContent").hide();
			
	                  var catelist = [];
	                  var catenum = new Object();
	                  var allnum = 0;
	                  for(var i=0;i<menulist.length;i++)
	                  {
	                      for(var j=0;j<menulist[i].firstcateids.length;j++)
	                      {
	                          if(catelist.indexOf(parseInt(menulist[i].firstcateids[j])) == -1)
	                          {
	                              catelist.push(menulist[i].firstcateids[j]);
	                              catenum[menulist[i].firstcateids[j]] = 1;
	                          }
	                          else
	                          {
	                              catenum[menulist[i].firstcateids[j]]++;
	                          }
	                          allnum++;
	                      }
	                  }
	                  console.log(catelist);
	                  console.log(catenum);
	                  var html = "";
	                  var htmlwap = "";
	                  for(var i=0;i<catelist.length;i++)
	                  {
	                      if (i == 0)
	                      {
	                          html += '<div class="on" attrid="'+catelist[i]+'">';
	                          htmlwap += '<a attrid="'+catelist[i]+'" href="#" class="on wapcate">';
	                      }
	                      else
	                      {
	                          html += '<div attrid="'+catelist[i]+'">';
	                          htmlwap += '<a attrid="'+catelist[i]+'" class="contactDealers wapcate" href="#">';
	                      }
	                      html += '<a href="javascript:;">'+firstcatelistdact[catelist[i]]+' ('+catenum[catelist[i]]+')</a></div>';
	                      htmlwap += firstcatelistdact[catelist[i]]+'('+catenum[catelist[i]]+')</a>';
	                  }
	                  $("#serachrescatelistmenu").html(html);
	                  $(".searchProductTab").html(htmlwap);
			
	                  $("#spannumnum").html(allnum);
	                  showprobycateidmenu(catelist[0]);
			
	                  $('.productSelectmenu div').click(function() {
	                      showprobycateidmenu($(this).attr("attrid"));
	                      $(this).addClass('on').siblings().removeClass('on')
	                  })
	                  $('.wapcate').click(function() {
	                      showprobycateidmenu($(this).attr("attrid"));
	                      $(this).addClass('on').siblings().removeClass('on')
	                  })
			
	              }
	              else
	              {
	                  $(".hasContentMenu").hide();
	                  $(".searchProductTab").hide();
	                  $(".menublankContent").show();
	              }
	          }
	          function clickwapsear(id){
	              console.log(id);
	          }
	          function showprobycateidmenu(id){
	              var linelist = [];
	              for(var i=0;i<menulist.length;i++)
	              {
	                  if (menulist[i].firstcateids.indexOf(parseInt(id)) != -1)
	                  {
	                      linelist.push(menulist[i]);
	                  }
	              }       
	              var url = "";
	              if (window.location.href.indexOf("news/") != -1)
	              {
	                  url = "../product/";
	              }
	              else if (window.location.href.indexOf("product/")==-1)
	              {
	                  url = "product/";
	              }
			
	              var html = "";
	              for(var i=0;i<linelist.length;i++)
	              {
	                  html += '<li>\
	                              <a href="'+url+'product-'+linelist[i].id+'.html"><img class="productImg" src="'+linelist[i].imgs[0].imgs[0]+'" alt="产品"><img class="productHover" src="'+linelist[i].imgs[0].imgs[0]+'" alt="产品">\
	                                  <p>'+linelist[i].name+'</p>\
	                                  <div class="bref">'+linelist[i].desctxt+'</div>\
	                                  <div class="price">查看更多</div>\
	                              </a>\
	                          </li>';
	              }
	              $("#searchresulmenu").html(html);
			
	          }
	          $('.searchContentInput input').focus(function() {
	              var word = $("#MenukeywordInput").val();
	              if (!word)
	              {
	                  $(".searchKeywordList").hide()
	                  return;
	              }
	              $(".searchKeywordList").show();
	          })
	          $('.searchInputIcon').click(function(){
	              searchMenukeyword($("#MenukeywordInput").val())
	          })
			
			
	          $(".searchContentInput input").keyup(function() {
	              if (event.keyCode == 13) {
	                  searchMenukeyword($("#MenukeywordInput").val())
	                  return;
	              }
	              $(".hasContentMenu").hide();
	              $(".searchProductTab").hide();
	              $(".menublankContent").hide();
	              $(".searchContentList").show();
			
	              var word = $("#MenukeywordInput").val();
	              if (!word)
	              {
	                  $(".searchKeywordList").hide()
	                  return;
	              }
	              $(".searchKeywordList").show();
	              
	              var list = getproductlistbyOnlyNamekeyword(word);
	              console.log(list);
			
	              var url = "";
	              if (window.location.href.indexOf("news/") != -1)
	              {
	                  url = "../product/";
	              }
	              else if (window.location.href.indexOf("product/")==-1)
	              {
	                  url = "product/";
	              }
	              var html = "";
	              for (var i = 0; i < list.length; i++) {
	                  html += '<li><a href="'+url+'product-'+list[i].id+'.html">' + list[i].name + '</a></li>';
	              }
	              $("#searchul").html(html);
	              $("#hasrevnum").html(list.length);
			
	              if (html) {
	                  $("#hasresdiv").show()
	                  $("#noresdiv").hide()
	              } else {
	                  $("#noresdiv").show()
	                  $("#hasresdiv").hide()
	              }
	          })
	          $('.searchContentInput').mouseleave(function(){
	              $('.searchKeywordList').hide()
	          })
	</script>
</html>
